<template>
  <zm-view ref="view">
    <zm-navbar :border-bottom="false" background="#ffffff">
      <view class="flex items-center ml-14">
        <u-search
          v-model="keyWord"
          placeholder="输入影片、影院搜索"
          focus
          :show-action="false"
          height="62rpx"
          @change="handleGetSearchData"
          @search="handleOnSearch"
          @clear="handleClear"
        ></u-search>
      </view>
    </zm-navbar>
    <view v-if="isExistSearchValue" class="bg-white">
      <zm-tabs v-model="tabType" :list="tabs"></zm-tabs>
    </view>
    <view v-if="searchRecord.length && !isExistSearchValue" class="flex flex-col px-24 pt-24 bg-white">
      <view class="flex items-center justify-between mb-20">
        <text class="font-28 font-bold">历史记录</text>
        <zm-icon name="delete-o" size="32rpx" @click="handleClearRecord"></zm-icon>
      </view>
      <view class="record-list">
        <view v-for="(item, index) in searchRecord" :key="index" class="record-item" @click="handleClickRecord(item)">{{ item }}</view>
      </view>
    </view>
    <view v-if="isExistSearchValue" class="content-wrap">
      <!-- 全部 -->
      <template v-if="tabType == 'all' && isExistSearchValue">
        <search-film-list v-if="hotFilm.length" :list="hotFilm" :keyword="keyWord"></search-film-list>
        <search-cinema-list v-if="cinemaList.length" :list="cinemaList" :keyword="keyWord"></search-cinema-list>
      </template>
      <!-- 电影列表 -->
      <template v-if="tabType == 'film'">
        <search-film-list :list="hotFilm" :keyword="keyWord"></search-film-list>
      </template>
      <!-- 影院列表 -->
      <template v-if="tabType == 'cinema'">
        <search-cinema-list :list="cinemaList" :keyword="keyWord"></search-cinema-list>
      </template>
    </view>
    <!-- 搜索提示 -->
    <zm-empty :show="searching && isNoSearchValue" text="搜索中..."></zm-empty>
    <!-- 空提示 -->
    <zm-empty :show="isNoSearchValue && !searching" :text="keyWord ? '没有找到相关内容' : '输入影片、影院搜索'"></zm-empty>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapGetters, mapMutations } from "vuex"
import searchFilmList from "./components/search-film-list/search-film-list"
import searchCinemaList from "./components/search-cinema-list/search-cinema-list"
export default {
  components: { searchFilmList, searchCinemaList },
  mixins: [page, hook],
  data() {
    return {
      tabs: [
        { text: "全部", value: "all" },
        { text: "影片", value: "film" },
        { text: "影院", value: "cinema" }
      ],
      activityId: "",
      searching: false,
      tabType: "all",
      keyWord: "",
      hotFilm: [],
      cinemaList: []
    }
  },
  computed: {
    isExistSearchValue() {
      return this.hotFilm.length || this.cinemaList.length
    },
    isNoSearchValue() {
      return this.hotFilm.length == 0 && this.cinemaList.length == 0
    },
    filterHotFilms() {
      return this.hotFilmsExpand ? this.hotFilms : this.hotFilm.slice(0, 4)
    },
    filterCinemaList() {
      return this.cinemaListExpand ? this.cinemaList : this.cinemaList.slice(0, 4)
    },
    ...mapGetters(["searchRecord", "location"])
  },
  onLoad(options) {
    this.activityId = options.activityId
  },
  methods: {
    // 获取搜索数据
    handleGetSearchData() {
      if (this.keyWord) {
        this.searching = true
        uni.$debounce(async () => {
          if (this.keyWord) {
            const res = await uni.$api.cinema.homePageFind({ keyWord: this.keyWord })
            this.searching = false
            this.hotFilm = res.hotFilm.map((item) => {
              return { ...item, versions: item.version?.split(",") || [] }
            })
            this.cinemaList = res.cinemaList
              .map((item) => {
                return { ...item, distance: uni.$calculateDistance(this.location.latitude, this.location.longitude, item.latitude, item.longitude) }
              })
              ?.sort((a, b) => {
                if (a.collectionType == 1 && b.collectionType != 1) {
                  return -1
                } else if (a.collectionType != 1 && b.collectionType == 1) {
                  return 1
                } else {
                  return a.distance - b.distance
                }
              })
          }
        })
      }
    },
    // 点击搜索记录
    handleClickRecord(item) {
      this.keyWord = item
    },
    // 键盘搜索
    handleOnSearch() {
      if (this.keyWord) {
        const list = this.searchRecord || []
        if (list.indexOf(this.keyWord) === -1) {
          list.unshift(this.keyWord)
        }
        this.SET_SEARCH_RECORD(list)
      }
    },
    // 清除搜索记录
    handleClearRecord() {
      this.SET_SEARCH_RECORD([])
    },
    handleClear() {
      this.hotFilm = []
      this.cinemaList = []
    },
    ...mapMutations(["SET_SEARCH_RECORD"])
  }
}
</script>

<style lang="scss" scoped>
.record-list {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 226rpx;
  .record-item {
    display: flex;
    height: 62rpx;
    padding: 0 22rpx;
    font-size: 28rpx;
    align-items: center;
    margin-right: 14rpx;
    margin-bottom: 20rpx;
    border-radius: 32rpx;
    background-color: #f4f6f7;
  }
}
.content-wrap {
  flex: 1;
  margin-top: 24rpx;
  position: relative;
  background-color: var(--page-color);
}
</style>
